<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue配合Ajax完成数据请求（异步请求  vue-resource）</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <div id="box">
        <input type="button" @click="get()" value="点我异步获取数据（Get）">
    </div>
    <script type="text/javascript">
        window.onload=function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'异步请求（Get）！！！',
                },
                methods:{
                    get:function (){
                        //发送Get请求
                        this.$http.get('/vue/ajax_test_file/ajax_info.txt').then(function(res){
                            document.write(res.body);
                        },function(){
                            alert('请求失败');
                        })
                    }
                }
            })
        }
    </script>



    <div id="box2">
        <input type="button" @click="post()" value="点我异步获取数据(Post)">
    </div>
    <script type = "text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box2',
                data:{
                    msg:'异步请求（Post）！！！',
                },
                methods:{
                    post:function(){
                        //发送 post 请求
                        this.$http.post('/vue/ajax_test_file/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
                            document.write(res.body);
                        },function(res){
                            console.log(res.status);
                        });
                    }
                }
            });
        }
    </script>
<!--    vue-resource 提供了 7 种请求 API(REST 风格)：-->
<!--    get(url, [options])-->
<!--    head(url, [options])-->
<!--    delete(url, [options])-->
<!--    jsonp(url, [options])-->
<!--    post(url, [body], [options])-->
<!--    put(url, [body], [options])-->
<!--    patch(url, [body], [options])-->
</body>
</html>